<template>
  <div id="PublicCom">
    <div class="tou flex">
      <p>欢迎登录北京大学官网! 今天是：{{ date }}</p>
      <marquee><span style="
            width: 200px;
            height: 40px;
            line-height: 40px;
            font-weight: bolder;
            font-size: 15px;
            color: white;
          ">北大校园预约须知 -> 保卫部：坚决整治交通工具乱停乱放问题
          ->保卫处：杜绝一切不文明游览问题</span></marquee>
      <p>
        保卫处电话：0379-5481843&nbsp;&nbsp;<router-link to="/login" v-if="flag" style="color: #fff">登录</router-link><span
          v-else>欢迎：
          <el-dropdown @command="exit()">
            <span class="el-dropdown-link">
              {{ user }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link to="/Personal_information">个人信息</router-link>
              </el-dropdown-item>
              <el-dropdown-item :command="1">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </p>
    </div>
    <div class="tou1 flex">
      <img src="../assets/logo.png" />
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1">
          <router-link to="/subscribe" style="width: 100%; display: inline-block">预约参观</router-link>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">北大建筑</template>
          <router-link :to="{ name: 'ximen', query: { title: '西校门' } }">
            <el-menu-item index="2-1">西校门</el-menu-item>
          </router-link>
          <router-link :to="{ name: 'ximen', query: { title: '校友桥' } }">
            <el-menu-item index="2-2">校友桥</el-menu-item>
          </router-link>
          <router-link :to="{ name: 'ximen', query: { title: '博雅塔' } }">
            <el-menu-item index="2-3">博雅塔</el-menu-item>
          </router-link>
          <router-link :to="{ name: 'ximen', query: { title: '蔡元培铜像' } }">
            <el-menu-item index="2-4">蔡元培铜像</el-menu-item>
          </router-link>
          <router-link :to="{ name: 'ximen', query: { title: '办公楼' } }">
            <el-menu-item index="2-5">办公楼</el-menu-item>
          </router-link>
          <router-link :to="{ name: 'ximen', query: { title: '柱础' } }">
            <el-menu-item index="2-6">柱础</el-menu-item>
          </router-link>
          <router-link :to="{ name: 'ximen', query: { title: '治贝子园' } }">
            <el-menu-item index="2-7">治贝子园</el-menu-item>
          </router-link>
          <router-link :to="{ name: 'ximen', query: { title: '鱼洗' } }">
            <el-menu-item index="2-8">鱼洗</el-menu-item>
          </router-link>
        </el-submenu>
        <el-menu-item index="3">
          <router-link to="/map" style="width: 100%; display: inline-block">校园地图</router-link>
        </el-menu-item>
        <el-menu-item index="4">
          <router-link to="/letter">信箱</router-link>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="box">
      <router-view />
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      info: null,
      activeIndex: "1",
      activeIndex2: "1",
      user: "",
      flag: false,
      date: new Date(),
    };
  },
  methods: {
    btn() {
      axios.get("api/stu/add2.do").then((res) => {
        console.log((this.info = res.data));
      });
    },
    // handleSelect(key, keyPath) {
    //   // console.log(key, keyPath);
    // },
    exit() {
      sessionStorage.removeItem("user");
      this.$message.success("已退出登录");
      this.$router.replace("login");
    },
  },
  created() {
    this.user = sessionStorage.getItem("user");
    this.flag = this.user == null;
    let d = new Date();
    this.date = d.getFullYear() + "年" + (d.getMonth()+1) + "月" + d.getDate() + "日";
    // console.log("flag:" + this.flag);
  },
};
</script>

<style lang="scss" scoped>
.tou {
  height: 40px;
  width: 100%;
  background-color: #94070a;
}

.tou>p {
  width: 850px;
  height: 40px;
  line-height: 40px;
  color: white;
}

.el-menu {
  display: flex;
  height: 65px;
  text-align: center;
  font-size: 40px;
  justify-content: center;
  flex-grow: 1;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-menu-item,
.el-submenu {
  width: 25%;
}

.el-menu--horizontal {
  width: 100%;
}

.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 2px solid #e40001;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>